<template>
	<view class="parent-view">
		<text class="tip-txt">从下方列表中定位,如未找到姓名,请在树谱添加</text>
		<view class="search-view">
			<view class="search">
				<image class="search-icon" src="../../static/fan_fragment_chat_search.png"></image>
				<input class="search-input" placeholder="搜索" @input="inputKey" @confirm="searchKey" />
			</view>
		</view>
		<scroll-view class="scroll-view" scroll-y="true">
			<view class="sc-item" v-for="(item , index) in searchList" :key="'item'+index" @click="itemClick" :data-index="index">
				<image class="select-icon" :src="isSelect==index?'../../static/fan_png_ic_radio_checked.png':'../../static/fan_png_ic_radio_unchecked.png'"/>
				<image class="head-image" :src="item.head" />
				<text class="name-txt">{{item.surname+item.name}}</text>
			</view>
		</scroll-view>
		<text class="complete-btn" :style="{'margin-bottom': isiPhoneX ? '66rpx':'0rpx'}" @click="complete">完成</text>
	</view>
</template>

<script>
	import request from '../index/request.js';
	let app = getApp();
	export default {
		data() {
			return {
				isiPhoneX: false,
				treeList: [],
				searchList: [],
				treeId: "",
				isSelect: -1,
				jiapuInfo: {},
				cardData: {},
				searchValue: ""
			}
		},
		onLoad: function(options) {
			this.jiapuInfo = uni.getStorageSync("jiapu_click_data")
			this.treeId = this.jiapuInfo.id
			this.cardData = JSON.parse(options.data)
			this.getTreeData()
			this.isiPhoneX=app.globalData.isIphone
		},
		methods: {
			onShow:function(){
				this.share.url= '/pages/tabBar/home/index?appInviteId='+this.appUtil.getAppInviteId()
				this.share.shareType=1
			},
			inputKey: function(event) {
				this.searchValue = event.target.value
			},
			searchKey: function(event) {
				this.isSelect=-1
				this.searchList.splice(0, this.searchList.length);
				if (this.searchValue) {
					for (var i = 0; i < this.treeList.length; i++) {
						var name = this.treeList[i].surname + this.treeList[i].name
						if (name.includes(this.searchValue)) {
							this.searchList.push(this.treeList[i])
						}
					}
				} else {
					for (var i = 0; i < this.treeList.length; i++) {
						this.searchList.push(this.treeList[i])
					}
				}
			},
			getTreeData: function() {
				var that = this
				request.post("api/apiv2/GetTree", {
					TreeId: that.treeId
				}).then(data => {
					for (var i = 0; i < data.datas.length; i++) {
						if(data.datas[i].gender==this.cardData.gender&&data.datas[i].is_living==1){
							that.treeList.push(data.datas[i])
						}
					}
					that.treeList.forEach(item => {
						this.searchList.push(item)
					})
				})
			},
			itemClick: function(event) {
				let item = event.currentTarget.dataset.index;
				this.isSelect = parseInt(item)
			},
			complete: function() {
				if (this.isSelect == -1) {
					uni.showToast({
						title: "请选择要定位的卡片",
						icon: "none"
					})
					return
				}
				var data = this.searchList[this.isSelect]
				this.bindingTreeCard(data.id)
			},
			bindingTreeCard: function(cardId) {
				var that = this
				request.post("api/apiv2/NewBindingTreeCard", {
					OnPQD: that.cardData.PQD,
					TreeId: this.treeId,
					CardId: cardId
				}).then(data => {
					uni.$emit("refrashTree")
					uni.navigateBack()
				})
			},
		}
	}
</script>

<style>
	@import "index.css";
</style>
